import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:smart_devices/bruno/src/components/button/brn_normal_button.dart';
import 'package:smart_devices/icons/src/ant_design.dart';
import 'package:smart_devices/routes/index.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';

import 'details_logic.dart';

class DeviceDetailsView extends GetView<DeviceDetailsLogic> {
  const DeviceDetailsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DeviceDetailsLogic>(
      builder: (_) {
        return Scaffold(
          backgroundColor:
              ColorsUtils.parseColorFromHexString(ColorsUtils.colorF6f6),
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios,
                color: Colors.white,
                size: 15,
              ),
              onPressed: Get.back,
            ),
            automaticallyImplyLeading: false,
            backgroundColor:
                ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
            title: Text(
              '设备信息',
              style: StylesUtils.customTextStyle(
                  fontSize: 18, fontWeight: FontWeight.w700),
            ),
            centerTitle: true,
            systemOverlayStyle: SystemUiOverlayStyle.dark,
            actions: [
              IconButton(
                icon: Icon(
                  AntDesign.delete,
                  color: Colors.white,
                  size: 20,
                ),
                onPressed: () {},
              )
            ],
          ),
          body: SingleChildScrollView(
            padding: const EdgeInsets.only(bottom: 80),
            child: Obx(() => Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      decoration: const BoxDecoration(color: Colors.white),
                      child: ListBody(
                        children: [
                          Container(
                            height: 40,
                            decoration:
                                const BoxDecoration(color: Colors.white),
                            child: CustomPaint(
                                painter: _MyCustomPaintLine(),
                                child: Container(
                                  margin: const EdgeInsets.only(left: 30),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '设备信息',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6666),
                                  ),
                                )),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '设备编号',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.code}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '设备名称',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.name}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '规格型号',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.standards}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '设备类型',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.type?.label}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '存放位置',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.location}',
                                      overflow: TextOverflow.ellipsis,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text('备      注',
                                      textAlign: TextAlign.left,
                                      textDirection: TextDirection.rtl,
                                      style: TextStyle(
                                        letterSpacing: 0,
                                        fontSize: 14,
                                        color:
                                            ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.color3333),
                                        fontWeight: FontWeight.normal,
                                        fontFamily: 'Regular',
                                      )),
                                )
                              ],
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(left: 40),
                            child: TextField(
                              textDirection: TextDirection.ltr,
                              readOnly: true,
                              controller: TextEditingController(
                                  text: controller.details.value.remark),
                              cursorColor: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.color1c24),
                              style: StylesUtils.customTextStyle(
                                  fontSize: 14, color: ColorsUtils.color1c24),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              cursorWidth: 2,
                              maxLines: 8,
                              cursorRadius: const Radius.circular(2),
                              decoration: InputDecoration(
                                  hintText: '请输入备注',
                                  hintStyle: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorCccc,
                                      fontSize: 15),
                                  isDense: true,
                                  isCollapsed: true,
                                  fillColor: Colors.white,
                                  border: InputBorder.none,
                                  focusColor:
                                      ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color1c24),
                                  contentPadding:
                                      const EdgeInsets.symmetric(vertical: 20),
                                  focusedBorder: InputBorder.none),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      decoration: const BoxDecoration(color: Colors.white),
                      child: ListBody(
                        children: [
                          Container(
                            height: 40,
                            decoration:
                                const BoxDecoration(color: Colors.white),
                            child: CustomPaint(
                                painter: _MyCustomPaintLine(),
                                child: Container(
                                  margin: const EdgeInsets.only(left: 30),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '使用情况',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6666),
                                  ),
                                )),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '当前状态',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.status?.label}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '使用部门',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.department?.name}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '负责人',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.user?.name}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '联系方式',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.mobile}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '启用日期',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.startDate}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '总功率',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.power}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      decoration: const BoxDecoration(color: Colors.white),
                      child: ListBody(
                        children: [
                          Container(
                            height: 40,
                            decoration:
                                const BoxDecoration(color: Colors.white),
                            child: CustomPaint(
                                painter: _MyCustomPaintLine(),
                                child: Container(
                                  margin: const EdgeInsets.only(left: 30),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '购置信息',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6666),
                                  ),
                                )),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '采购订单',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.oderNo}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '供应商',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.supplier}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '采购部门',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.buyDept?.name}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '采购人员',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.buyUser?.name}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '采购日期',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.buyDate}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '出厂日期',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.leaveFactoryDate}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 100,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '生厂商',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.manufacturer}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 130,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '使用寿命（年）',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.life}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 50,
                            child: Row(
                              children: [
                                Container(
                                  width: 130,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 30),
                                  child: Text(
                                    '购买价格（元）',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    padding: const EdgeInsets.only(left: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '${controller.details.value.price}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                )),
          ),
          extendBody: true,
          bottomSheet: Container(
            height: 70,
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    top: BorderSide(
                        color: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.colorE4e4)))),
            alignment: Alignment.center,
            child: FractionallySizedBox(
              widthFactor: 0.9,
              heightFactor: 0.75,
              alignment: Alignment.center,
              child: BrnNormalButton(
                onTap: () {
                  Get.toNamed(Routes.deviceModify,
                      arguments: controller.details.value);
                },
                backgroundColor:
                    ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
                text: '',
                child: Text(
                  '编辑',
                  style: StylesUtils.customTextStyle(fontSize: 14),
                ),
              ),
            ),
          ),
        );
      },
      init: controller,
    );
  }
}

class _MyCustomPaintLine extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// w = 10, h = 20
    Paint paint = Paint()
      ..isAntiAlias = false
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color0052)
      ..style = PaintingStyle.fill;
    Rect rect = const Rect.fromLTWH(10, 10, 10, 20);
    canvas.drawRect(rect, paint);

    Offset p1 = Offset(0, size.height);
    Offset p2 = Offset(size.width, size.height);

    canvas.drawLine(
        p1,
        p2,
        paint
          ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
